<!-- 权限管理 -->
<template>
    <div class="limits" v-loading="loading">
        <!-- 标题 -->
        <div class="tablename borderleri">
            权限管理
        </div>
        <!-- 按钮 -->
        <div class="btnBox">
            <el-button plain icon="Back" size="default" v-if="route.query.id" @click="returnP">返回</el-button>
            <el-button type="primary" icon="Check" size="default" @click="submit">保存</el-button>
            <el-button size="default" @click="copyauthority">权限复制</el-button>
        </div>
        <div class="contentBox" style="margin-left: 20px;">
            <div style="display: flex;">
                <!-- 科室管理 -->
                <div style="margin-top: 20px;" class="boxfafk2">
                    <div class="fsdfsikj  fsdfsi">科室名称</div>
                    <!-- 搜索框 -->
                    <div>
                        <el-input size="default" clearable placeholder="科室" style="width: 240px;" prefix-icon="Search"
                            v-model="search_depart">
                        </el-input>
                    </div>
                    <div v-loading="loading">
                        <div>
                            <el-tree ref="tree_depart" :data="departmentArr" node-key="id" default-expand-all
                                :props="defaultProps_depart" :expand-on-click-node="false" :default-checked-keys="[1]"
                                @node-click="handleNodeClick2" :filter-node-method="filterNode">
                                <template class="custom-tree-node" #default="{ node, data }">
                                    <span v-if="data.department_name.length <= 10">{{ data.department_name }}</span>
                                    <el-tooltip class="box-item" effect="dark" :content="data.department_name"
                                        placement="top-start" v-else>
                                        <span style="color:#1f2d3d;">{{ data.department_name.substring(0, 10) + '...'
                                        }}</span>
                                    </el-tooltip>
                                </template>
                            </el-tree>
                        </div>
                    </div>
                </div>
                <!-- 科室管理 -->
                <!--角色管理 -->
                <div class="boxfafk1">
                    <div class="fsdfsikj  fsdfsi">角色名称</div>
                    <div class="fsdfsikj">
                        <el-input size="small" clearable placeholder="角色名称" style="width: 200px;height: 36px;"
                            prefix-icon="Search" v-model="searchBox" @keyup.enter.native="fnFilterChangeInit"
                            @clear="fnFilterChangeInit">
                        </el-input>
                    </div>
                    <div class="fsdfsikj" style="cursor:pointer;text-align: left;padding-left: 20px;"
                        v-for="(item, index) in tableData" :key="index" v-bind:class="{ on: index == currentroleIndex }"
                        @click="changerole(index, item)">
                        <span v-if="item.role_name.length <= 14">{{ item.role_name }}</span>
                        <el-popover style="cursor: pointer;" size="mini" v-else placement="top-start" width="200"
                            trigger="hover" :content="item.role_name">
                            <span slot="reference">{{ item.role_name.substring(0, 14) + '...' }}</span>
                        </el-popover>
                    </div>
                </div>
                <!--角色管理 -->
                <!-- 权限勾选 -->
                <div class="authority">
                    <div style="margin-bottom: 10px;">
                        <el-checkbox size="default" v-model="ifchecked" @change="handleCheckedChange">
                        </el-checkbox>
                        <span style="font-size: 16px;margin-left: 12px;">{{ ifchecked ? '全不选' : '全选' }}</span>
                    </div>
                    <!-- 每行排布 -->
                    <div class="itemRow" v-for="(item, idx) in authorityArr" :key="idx">
                        <!-- 一级权限 -->
                        <div class="one">
                            <el-checkbox-group v-model="userAuthorityArr" @change="v => changeVal(v, item.key)">
                                <el-checkbox :label="item.label" :value="item.key"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <!-- 二级权限 -->
                        <div class="two" v-if="item.children">
                            <div v-for="(it, id) in item.children" :key="id" class="towItem">
                                <div class="towTitle">
                                    <el-checkbox-group v-model="userAuthorityArr" @change="v => changeVal(v, it.key)">
                                        <el-checkbox :label="it.label" :value="it.key"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                                <!-- 三级权限 -->
                                <div class="three" v-if="it.children">
                                    <div v-for="(i, x) in it.children" :key="x" class="threeItem">
                                        <el-checkbox-group v-model="userAuthorityArr"
                                            @change="v => changeVal(v, i.key)">
                                            <el-checkbox :label="i.label" :value="i.key"></el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 权限勾选 -->
            </div>
            <!-- 占位 -->
            <div style="height:80px;"></div>
        </div>
        <!-- 选择角色 -->
        <choose-role ref="mychooserole" v-if="modalStatus == '选择角色弹窗'" @submitHandle="submitHandle" />
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useCach } from '@/store/cach'
import { needlessAuthorRouter } from '@/router'
import commonV from '@/common'
import api from '@/api'
import { reactive, ref, nextTick, computed, watch, onMounted, toRefs } from 'vue'

const route = useRoute()
const router = useRouter()

let pageConfig = useCach()
let modalStatus = computed(() => pageConfig.modalStatus)
//权限修改能否保存
let ifsave = computed(() => pageConfig.ifsave)
//从科室页面数据带回
let departmentRow = computed(() => pageConfig.departmentRoles || {})

//数据
let state = reactive({
    loading: false,
    currentdepart: {}, //当前部门信息
    currentroleRow: {}, //当前角色信息
    currentroleIndex: '',
    isChangeArr: [], //是否变更权限初始值
    departmentArr: [], //科室列表
    search_depart: '',
    defaultProps_depart: {
        children: "children",
        label: "department_name"
    },
    tableData: [],
    authorityArr: [], //权限列表
    allAuthorityArr: [], //所有权限列表 key
    userAuthorityArr: [], //当前用户存在权限 key
    ifchecked: false, //权限是否全选
    searchBox: '',
    onlyOneChild: null
})
let {
    loading, search_depart,
    departmentArr, defaultProps_depart,
    currentroleIndex, ifchecked,
    tableData, searchBox,
    authorityArr, userAuthorityArr
} = toRefs(state)

//实例
let mychooserole = ref(null)
let tree_depart = ref(null)

//监听 科室搜索
watch(() => state.search_depart, val => {
    tree_depart.value.filter(val)
})

onMounted(() => {
    getRoutesMenu()
    getdepartdata() //获取科室信息
})

//获取科室列表
let getdepartdata = async () => {
    state.loading = true
    let params = {}
    if (state.searchBox) {
        params.department_name = state.searchBox
    }
    //从科室角色过来
    state.currentdepart = JSON.parse(JSON.stringify(departmentRow.value))
    let res = await api.getaxiosdata("department", params)
    if (res) {
        state.departmentArr = commonV.transDatatotree(res, "id", "parent_id", "children") //将普通数组转换为tree数组
        if (res.length) {
            nextTick(function () {
                if (JSON.stringify(state.currentdepart) == '{}') {
                    dealdepartmenttree(res[0])
                } else {
                    let id = route.query.id
                    dealdepartmenttree(res.find(i => i.id === state.currentdepart.id), id)
                }
            })
        }
    }
    state.loading = false
}

//获取权限菜单
let getRoutesMenu = () => {
    state.authorityArr = getasyncRoutesMenu(needlessAuthorRouter)
    state.authorityArr.forEach(item => {
        state.allAuthorityArr.push(item.key) //一级
        if (item.children) {
            item.children.forEach(it => {
                state.allAuthorityArr.push(it.key) //二级
                if (it.children) {
                    it.children.forEach(i => {
                        state.allAuthorityArr.push(i.key) //三级
                    })
                }
            })
        }
    })
}

//获取权限菜单
let getasyncRoutesMenu = (routek, parent_title = "") => {
    const res = []
    for (let index = 0; index < routek.length; index++) {
        const element = routek[index];
        let objck = {
            key: '',
            label: '',
        }
        if (!element.meta.hidden) {
            if (element.meta && element.meta.title) {
                let key = ""
                let keyarr = []
                key = element.path
                keyarr = key.split('/')
                key = keyarr[keyarr.length - 1]
                objck.key = parent_title + (parent_title != "" ? "&&" : '') + key
                objck.label = element.meta.title
            }
            if (element.children && !(hasOneShowingChild(element.children, element) && (!state.onlyOneChild
                .children || state.onlyOneChild.noShowingChildren) && !element.alwaysShow)) {
                objck.children = getasyncRoutesMenu(element.children, objck.key)
            } else {
                let children = [];
                if (typeof element.operating != "undefined") {
                    for (
                        let i = 0; i < element.operating.length; i++
                    ) {
                        const ele = element.operating[i];
                        children.push({
                            key: objck.key +
                                "||" +
                                ele.value,
                            label: ele.label
                        });
                    }
                    objck.children = children
                }
            }
            res.push(objck)
        }
    }
    pageConfig.changeSave(true)
    return res
}

let hasOneShowingChild = (children = [], parent) => {
    const showingChildren = children.filter(item => {
        if (item.hidden) {
            return false
        } else {
            // Temp set(will be used if only has one showing child)
            state.onlyOneChild = item
            return true
        }
    })
    // When there is only one child router, the child router is displayed by default
    if (showingChildren.length === 1) {
        return true
    }

    // Show parent if there are no child router to display
    if (showingChildren.length === 0) {
        state.onlyOneChild = {
            ...parent,
            path: '',
            noShowingChildren: true
        }
        return true
    }

    return false
}

//返回
let returnP = () => {
    router.push({
        path: "/systemManage/departmentMan"
    })
}

//点击科室
let handleNodeClick2 = (data) => {
    if (!ifsave.value) {
        ElMessageBox.confirm("此角色数据未保存，是否切换科室？", "提示", {
            confirmButtonText: "确 定",
            cancelButtonText: "取 消",
            type: "warning"
        })
            .then(() => {
                dealdepartmenttree(data)
            })
            .catch(() => {
                tree_depart.value.setCurrentKey(state.currentdepart.id)
            })
        return
    }
    dealdepartmenttree(data)
}

//处理科室tree选择事件
let dealdepartmenttree = (row, id) => {
    state.currentroleRow = {}
    state.currentroleIndex = null
    state.currentdepart = JSON.parse(JSON.stringify(row))
    if (tree_depart.value) {
        tree_depart.value.setCurrentKey(state.currentdepart.id)
        state.tableData = state.currentdepart.department
        if (state.tableData.length) {
            //从科室角色过来
            if (id) {
                state.currentroleIndex = state.tableData.findIndex(it => it.id == id)
                state.currentroleRow = state.tableData[state.currentroleIndex]
            } else {
                state.currentroleRow = state.tableData[0]
                state.currentroleIndex = 0
            }
            nextTick(() => {
                getUserAuthority(state.currentroleRow)
            })
        } else {
            state.currentroleRow = {}
            state.currentroleIndex = null
        }
    }

    pageConfig.changeSave(true)
}

//获取用户的权限
let getUserAuthority = async (row) => {
    //没有改变
    //兼容以前
    state.loading = true
    let res = await api.getaxiosdata("roles", {
        id: row.id
    })
    if (res) {
        let arr = res.results[0].permission.split(',')
        let temp = JSON.parse(JSON.stringify(arr))
        arr.forEach(it => {
            let index = it.indexOf("||") //直接找三级权限
            if (index !== -1) {
                let one = it.split("&&") //一级权限
                let two = it.split('||') //二级权限
                if (!temp.includes(one[0])) {
                    temp.push(one[0])
                }
                if (!temp.includes(two[0])) {
                    temp.push(two[0])
                }
            }
        })
        state.isChangeArr = temp //是否变更权限初始值
        state.userAuthorityArr = temp //角色权限
        state.ifchecked = (state.allAuthorityArr.length == state.userAuthorityArr.length)
        state.loading = false
    }
}

//过滤结构树
let filterNode = (value, data, node) => {
    if (!value) {
        return true
    }
    let _array = [] //这里使用数组存储 只是为了存储值。
    getReturnfilterNode(node, _array, value)
    let result = false
    _array.forEach((item) => {
        result = result || item
    })
    return result
}

//返回数据节点
let getReturnfilterNode = (node, _array, value) => {
    let isPass = node.data && node.data.department_name && node.data.department_name.indexOf(value) !== -1
    isPass ? _array.push(isPass) : ''
    if (!isPass && node.level != 1 && node.parent) {
        getReturnNode(node.parent, _array, value)
    }
}

let getReturnNode = (node, _array, value) => {
    let isPass = node.data && node.data.label && node.data.label.indexOf(value) !== -1
    isPass ? _array.push(isPass) : ''
    if (!isPass && node.level != 1 && node.parent) {
        getReturnNode(node.parent, _array, value)
    }
}

//角色筛选
let fnFilterChangeInit = () => {
    let tableData = []
    state.tableData = state.currentdepart.department
    for (let index = 0; index < state.tableData.length; index++) {
        const element = state.tableData[index];
        if (element.role_name.indexOf(state.searchBox) != -1) {
            tableData.push(element)
        }
    }
    state.tableData = tableData
}

//权限管理是否全选
let handleCheckedChange = (val) => {
    if (val) { // 全选
        let arrA = []
        for (let index = 0; index < state.authorityArr.length; index++) {
            const element = state.authorityArr[index]
            arrA.push(element.key)
            if (element.children) {
                element.children.forEach(element2 => {
                    arrA.push(element2.key)
                    if (element2.children) {
                        element2.children.forEach(element3 => {
                            arrA.push(element3.key)
                        })
                    }
                })
            }
        }
        state.userAuthorityArr = arrA
        return
    }
    // 取消选中
    state.userAuthorityArr = []
}

//改变角色时
let changerole = (index, item) => {
    if (!ifsave.value) {
        ElMessageBox.confirm("此角色数据未保存，是否切换角色？", "提示", {
            confirmButtonText: "确 定",
            cancelButtonText: "取 消",
            type: "warning"
        }).then(() => {
            state.ifchecked = false //全选
            state.currentroleRow = state.tableData[index]
            state.currentroleIndex = index
            getUserAuthority(item)
            setTimeout(() => {
                pageConfig.changeSave(true)
            }, 500)
        }).catch(() => { })
    } else {
        state.ifchecked = false //全选
        state.currentroleRow = state.tableData[index]
        state.currentroleIndex = index
        getUserAuthority(item)
        setTimeout(() => {
            pageConfig.changeSave(true)
        }, 500)
    }
}

//一级权限变化触发
let changeVal = (v, key) => {
    pageConfig.changeSave(false) //状态改为未修改
    //选中状态
    let oneIndex = key.indexOf("&&") //二级权限标识
    let twoIndex = key.indexOf("||") //三级权限标识
    let flag = v.includes(key) //取消还是选中
    if (flag) {
        if (oneIndex === -1 && twoIndex === -1) {
            //如果选择的是一级权限  那么后面的二级 三级权限 全部选中
            let filterArr = state.allAuthorityArr.filter(it => (it.indexOf(key) !== -1 && it !== key))
            state.userAuthorityArr.push(...filterArr) //合并 会去重
        } else if (oneIndex !== -1 && twoIndex === -1) {
            //如果选择的是二级权限   那么后面的三级权限 全部选中 如果一级权限 没选中 需要选中
            let filterArr = state.allAuthorityArr.filter(it => (it.indexOf(key) !== -1 && it !== key))
            state.userAuthorityArr.push(...filterArr) //合并 会去重
            //判断一级权限是否选中
            let str = key.split("&&")[0] //"sytaskorder&&Sytaskorder"转为[sytaskorder, Sytaskorder]
            let one = state.userAuthorityArr.indexOf(str)
            if (one === -1) {
                state.userAuthorityArr.push(str)
            }
        } else {
            //如果选择的是三级任务 前面的一级权限二级权限没有
            let oneArr = key.split("&&")
            let twoArr = key.split('||')
            // console.log(oneArr)
            if (!state.userAuthorityArr.includes(oneArr[0])) {
                //如果没有一级权限  需要选中
                state.userAuthorityArr.push(oneArr[0])
            }
            if (!state.userAuthorityArr.includes(twoArr[0])) {
                //如果没有二级权限  需要选中
                state.userAuthorityArr.push(twoArr[0])
            }
        }
    } else {
        if (oneIndex === -1 && twoIndex === -1) {
            //如果选择的是一级任务  那么后面的二级 三级任务 全部取消选中
            let filterArr = state.allAuthorityArr.filter(it => it.indexOf(key) !== -1)
            //筛选出不一样的重新赋值
            state.userAuthorityArr = state.userAuthorityArr.filter(it => !filterArr.includes(it))
        } else if (oneIndex !== -1 && twoIndex === -1) {
            //如果选择的是二级任务  那么后面的三级任务 全部取消选中 如果一级任务选中 需要取消选中
            let filterArr = state.allAuthorityArr.filter(it => it.indexOf(key) !== -1)
            //筛选出不一样的重新赋值
            state.userAuthorityArr = state.userAuthorityArr.filter(it => !filterArr.includes(it))
            //判断一级权限是否选中
            let str = key.split("&&")[0] //"sytaskorder&&Sytaskorder"转为[sytaskorder, Sytaskorder]
            let one = state.userAuthorityArr.indexOf(str)
            let brother = state.userAuthorityArr.filter(it => it.indexOf(str + "&&") !== -1 && it.indexOf('||') === -1)
            //console.log(one, brother)
            //如果没有同级兄弟就关闭一级权限
            if (one !== -1 && !brother.length) {
                state.userAuthorityArr.splice(one, 1)
            }
        } else {
            //如果选择的是三级任务 前面的一级权限二级权限没有
            let oneArr = key.split("&&")
            let twoArr = key.split('||')
            if (state.userAuthorityArr.includes(twoArr[0])) {
                //如果有二级权限  并且底下的三级权限没有一个勾选的情况下 取消2级权限
                let filterThree = state.userAuthorityArr.filter(it => it.indexOf(twoArr[0] + '||') !== -1)
                //取消2级权限
                if (!filterThree.length) {
                    let idx = state.userAuthorityArr.findIndex(i => i === twoArr[0])
                    if (idx != -1) {
                        state.userAuthorityArr.splice(idx, 1)
                    }
                    //如果有一级权限 并且下面2级权限都取消的情况下 取消一级权限
                    let filterTwo = state.userAuthorityArr.filter(it => it.indexOf(oneArr[0] + '&&') !== -1)
                    if (!filterTwo.length) {
                        //取消一级权限
                        let idx = state.userAuthorityArr.findIndex(i => i === oneArr[0])
                        if (idx != -1) {
                            state.userAuthorityArr.splice(idx, 1)
                        }
                    }
                }
            }
        }
    }
}

//权限复制
let copyauthority = () => {
    if (JSON.stringify(state.currentroleRow) == '{}') {
        ElMessage({
            message: "未选中角色",
            type: "warning"
        })
        return
    }
    pageConfig.changeShowModal(true)
    pageConfig.changeModalStatus('选择角色弹窗')
    nextTick(() => {
        mychooserole.value.openFunction()
    })
}

//保存
let submit = () => {
    ElMessageBox.confirm(
        '确定保存此次操作?',
        '提示',
        {
            confirmButtonText: '确 定',
            cancelButtonText: '取 消',
            type: 'warning',
        }
    ).then(async () => {
        state.loading = true
        pageConfig.changeSave(true) //状态改为未修改
        let params = {}
        params.department = state.currentdepart?.id //科室id
        params.id = state.currentroleRow?.id //科室id
        params.permission = state.userAuthorityArr.join(',') //角色权限
        let res = await api.changeaxiosdata("roles", "patch", params)
        if (res) {
            ElMessage({
                message: '操作成功!',
                type: 'success'
            })
            state.isChangeArr = JSON.parse(JSON.stringify(state.userAuthorityArr)) //重新赋值 可以切换
            state.loading = false
        }
    }).catch(() => { })
}

//选择角色回调
let submitHandle = async (title, selectedList) => {
    state.loading = true
    let params = {
        id: 1,
        ids: commonV.deveridarrry(selectedList),
        permission: state.userAuthorityArr.join(',')
    }
    let res = await api.changeaxiosdata('changerolearr', 'put', params)
    if (res) {
        ElMessage({
            message: "操作成功",
            type: "success"
        })
        savecurrenrole()
    }
    state.loading = false
}

//保存当前角色数据
let savecurrenrole = async () => {
    state.loading = true
    let params = {}
    if (state.searchBox) {
        params.department_name = state.searchBox
    }
    let res = await api.changeaxiosdata("department")
    if (res) {
        state.departmentArr = commonV.transDatatotree(res, "id", "parent_id", "children") //将普通数组转换为tree数组
        nextTick(() => {
            tree_depart.value.setCurrentKey(state.currentdepart.id);
            let row = res.find(i => i.id === state.currentdepart.id)
            state.currentdepart = row
            state.tableData = state.currentdepart.department
        })
    }
    state.loading = false
}
</script>

<style lang="scss" scoped>
.limits {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    border-left: none;
    border-right: none;
    margin-top: 10px;
}

.tablename {
    font-size: 18px;
    color: #1f2d3d;
    padding: 16px 20px 10px;
}

.btnBox {
    padding: 10px 20px;
}

.role {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 10px 20px;
}

.btn {
    margin-right: 15px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.btn:hover {
    opacity: .7;
    background: #409EFF;
    color: #fff;
}

.authority {
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
    margin-top: 20px;
    width: calc(100% - 530px);
}

.itemRow {
    width: 100%;
    min-height: 30px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

.itemRow:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.itemRow .one {
    display: flex;
    width: 160px;
    padding-left: 8px;
}

.itemRow .two {
    width: calc(100% - 160px);
    text-indent: 8px;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.itemRow .two .towItem {
    display: flex;
    min-height: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.itemRow .two .towItem .towTitle {
    display: flex;
    align-items: center;
    width: 170px;
    flex-wrap: wrap;
}

.itemRow .two .towItem:last-child {
    border-bottom: none;
}

.itemRow .two .threeItem {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.threeItemB {
    /* display: flex;
    align-items: center; */
    margin-right: 15px;
    margin-top: 2.5px;
    margin-bottom: 2.5px;
}

.three {
    width: calc(100% - 170px);
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}


.boxfafk1 {
    &:deep(.el-tree-node__label) {
        padding: 10px;
        font-size: 16px;
    }
}

.boxfafk2 {
    width: 260px;
    margin-right: 10px;
    height: 675px;
    margin-top: 10px;
    border: 1px solid rgba(211, 220, 230, 1);
    overflow: auto;
    padding-bottom: 10px;

    &:deep(.el-input__inner) {
        border: none;
        border-bottom: 1px solid #dcdfe6;
        border-radius: 0;
    }

    &:deep(.el-input__prefix) {
        height: 8%
    }

    &:deep(.el-tree-node.is-current>.el-tree-node__content) {
        background-color: #20a0ff !important;
        color: #ffffff;
    }

    &:deep(.el-input__wrapper) {
        box-shadow: none;
    }
}

.boxfafk1 {
    width: 220px;
    margin-right: 10px;
    height: 675px;
    margin-top: 20px;
    border: 1px solid rgba(211, 220, 230, 1);
    overflow: auto;
    padding-bottom: 10px;

    &:deep(.el-tree-node__label) {
        padding: 10px;
        font-size: 16px;
    }

    &:deep(.el-tree-node__label) {
        padding: 10px;
        font-size: 16px;
    }
}

.fsdfsikj {
    height: 49px;
    text-align: center;
    line-height: 50px;
    border-bottom: 1px solid #d3dce6;
    color: #1f2d3d;
    font-size: 14px;
}

.fsdfsi {
    background: rgba(245, 247, 250, 1);
}

.on {
    background: #20a0ff;
    color: #ffffff;
}

.threeP {
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    padding-left: 20px;
}
</style>